<%--
  Created by IntelliJ IDEA.
  User: sicilin
  Date: 2017/9/22
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="../commons-bootstrap.jsp"%>
    <link rel="stylesheet" href="<%=basePath%>common/script/bootstarp-table/bootstrap-table.min.css" />
    <script src="<%=basePath%>common/script/bootstarp-table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="<%=basePath%>common/script/bootstarp-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <title>用户管理界面</title>
    <style type="text/css">
        body{
            padding-top:10px;
        }
        .rightPanel{
            width:300px;
            height:calc(100vh - 20px);
            float:left;
        }
        .contentPanel{
            width:calc(100vw - 360px);
            /*min-width:600px;*/
            height:calc(100vh - 20px);
            float:left;
            margin-right:10px;
            background-color:#EDF4F2;
            padding:10px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#userList').bootstrapTable({
                url:'json/test-data.json'
                ,pagination:true
                ,pageNumber:1
                ,pageSize:2
                ,pageList:[1,2,3]
                ,search:true
                ,idField:'userId'
                ,paginationVAlign:'bottom'
//                ,showPaginationSwitch:true
                ,showRefresh:true
                ,columns:[
                    {field:'company',title:'所属公司'}
                    ,{field:'account',title:'账号'}
                    ,{field:'name',title:'名称'}
                    ,{field:'telephone',title:'手机号'}
                    ,{field:'sex',title:'性别'}
                    ,{field:'email',title:'电子邮箱'}
                    ,{field:'qq',title:'QQ'}
                    ,{field:'address',title:'地址'}
                    ,{field:'status',title:'状态'}
                    ,{field:'createTime',title:'创建时间'}
                    ,{field:'updateTime',title:'更新时间'}
                ]
            });
        });
    </script>
</head>
<body style="background-color:#99ccff;" class="container-fluid">
<div class="panel panel-info contentPanel">
    <div style="height:calc(100% - 20px);">
        <table id="userList">
        </table>
    </div>
</div>
<div class="panel panel-warning rightPanel">

</div>
</div>
</body>
</html>
